<template>
	<view>
		<view v-if="isloading" class="edit">
			<form @submit="onSubmit">
				<view class="item">
					<input v-model="formValue.title" type="text" name="title" placeholder="请输入标题"></input>
				</view>

				<view class="item">
					<input v-model="formValue.author" type="text" name="author" placeholder="请输入作者"></input>
				</view>

				<view class="item">
					<textarea v-model="formValue.content" name="content" placeholder="请输入详细内容"></textarea>
				</view>

				<view class="item">
					<uni-file-picker v-model="imageValue" ref="files" :autoUpload="false" :limit="3"
						fileMediatype="image" mode="grid" returnType="array" fileExtname="jpg,png,gif,webp"
						title="可选图片数量" @select="selectFiles" />
					<!-- @select="selectFiles" @success="uploadFilesSuccess" -->
				</view>

				<view class="item">
					<button @click="resetFormValue">重置</button>
					<button form-type="submit" type="primary" :disabled="inDisabled(formValue)">提交</button>
				</view>
			</form>
		</view>

		<view v-else>
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageValue: [],
				picurls: [],
				articleID: 0,
				isloading: false,
				formValue: {},
				oldFormValue: {},
			};
		},
		onLoad(e) {
			this.articleID = e.id
		},
		onShow() {
			this.getRowDetail()
		},
		watch: {
			// 使用watch来响应数据的变化
			imageValue(newVal, oldVal) {
				console.log('watch', newVal);
				this.imageValue = newVal
				this.picurls = this.imageValue.map(item => {
					return item.url;
				})
			}
		},
		methods: {
			//判断按钮是否禁用
			inDisabled(obj) {
				let {
					title,
					author,
					content
				} = obj;
				let nobj = {
					title,
					author,
					content
				};
				let bool = Object.keys(nobj).some((key, value) => {
					return nobj[key] == ''
				})
				return bool;
			},
			// 重置formValue的值
			resetFormValue() {
				this.formValue = {
					...this.oldFormValue
				}
				this.imageValue = this.oldFormValue.picurls.map(item => {
					return {
						url: item
					}
				})
			},
			//点击提交
			onSubmit() {
				uni.showToast({
					icon: "loading",
					title: "正在上传"
				})
				new Promise(async (resolve, reject) => {
					try {
						await this.$refs.files.upload()
						await uniCloud.callFunction({
							name: "CloudArticle-update_row",
							data: {
								detail: this.formValue,
								picurls: this.picurls
							}
						})
						resolve();
					} catch (e) {
						reject(e);
					}
				}).then(() => {
					uni.showToast({
						title: "发布成功"
					})
				}).catch((e) => {
					uni.showToast({
						icon: "error",
						title: "发布失败"
					})
				}).finally(() => {
					this.imageValue = []
					this.picurls = []
					setTimeout(() => {
						uni.hideToast();
						// uni.reLaunch({
						// 	url: "/pages/index/index"
						// })
						uni.navigateBack(1)
					}, 500)
				})
			},
			// 获取详情信息
			getRowDetail() {
				uniCloud.callFunction({
					name: "CloudArticle-get_row",
					data: {
						id: this.articleID
					}
				}).then((res) => {
					// console.log(res);
					if (res.result.data.length == 0) throw new Error('no')
					this.isloading = true
					this.formValue = {
						...res.result.data[0]
					}
					this.oldFormValue = {
						...res.result.data[0]
					}
					if (this.formValue.picurls) {
						this.imageValue = this.formValue.picurls.map(item => {
							return {
								url: item
							}
						})
					}
				}).catch((err) => {
					console.log(err);
					uni.showToast({
						icon: "error",
						title: "加载失败"
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/index/index"
						})
						// uni.navigateBack(1)
					}, 500)
				})
			},
			selectFiles(e) {
				let oldImageValue = this.imageValue
				this.imageValue = [...oldImageValue, ...e.tempFiles]
			}
		}
	}
</script>

<style lang="scss">
	.edit {
		padding: 30rpx;

		.item {
			padding-bottom: 20rpx;

			input,
			textarea {
				border: 1rpx solid #eee;
				height: 80rpx;
				padding: 0 20rpx;
			}

			textarea {
				height: 200rpx;
				width: 100%;
				box-sizing: border-box;
			}

			button {
				margin-bottom: 20rpx;
			}
		}
	}
</style>